<template>
  <div>
    <Header title="日结算统计"></Header>
    <div class="chaxun">
      <div class="left">
        <van-field v-model="date.start" label="开始日期:" readonly @click="showstart=true" />
        <van-field v-model="date.end" label="结束日期:" readonly @click="showend=true" />
        <van-field v-model.trim="amount" center clearable type="number" label="提现:" />
      </div>
      <div class="right">
        <van-button type="info" size="small" style="margin-top: 5px;" @click="select">查询</van-button>
        <van-button type="info" size="small" style="margin-top: 5px;" @click="reset">重置</van-button>
        <van-button type="info" size="small" style="margin-top: 5px;" @click="apply">申请提现</van-button>
      </div>
    </div>
    <el-table
      size="mini"
      v-loading="loading"
      :data="vesssel"
      height="458"
      border
      center
      :stripe="true"
      :cell-style="{padding:'9px 0'}"
      style="width: 100%"
      @row-click="showdata"
    >
      <el-table-column
        align="center"
        prop="settlement_date"
        fixed
        label="结算日期"
        show-overflow-tooltip
      ></el-table-column>
      <el-table-column align="center" prop="day_income" label="日收入" show-overflow-tooltip></el-table-column>
      <el-table-column align="center" prop="day_receivable" label="实际收入" show-overflow-tooltip></el-table-column>
      <el-table-column align="center" prop="day_distribute" label="上级收入" show-overflow-tooltip></el-table-column>
    </el-table>
    <pag :total="total" ref="page" @pagenum="pagenum"></pag>
    <!-- 开始日期控件 -->
    <van-popup v-model="showstart" position="bottom">
      <van-datetime-picker
        v-model="currentDate"
        type="date"
        @confirm="start"
        @cancel="showstart=false"
        :max-date="maxDate"
        :min-date="minDate"
      />
    </van-popup>
    <!-- 结束日期控件 -->
    <van-popup v-model="showend" position="bottom">
      <van-datetime-picker
        v-model="currentDate"
        type="date"
        @confirm="end"
        @cancel="showend=false"
        :max-date="maxDate"
        :min-date="minDate"
      />
    </van-popup>
    <!--弹出层  -->
    <van-popup v-model="show" round position="bottom" :style="{ height: '30%'}">
      <van-field label="用户名" :readonly="true" label-width="130px" v-model="form.user_name" />
      <van-field label="等级" :readonly="true" label-width="130px" v-model="form.description" />
      <van-field label="上级代理" :readonly="true" label-width="130px" v-model="form.pname" />
      <van-field label="支付状态" :readonly="true" label-width="130px" v-model="form.settlement_state" />
    </van-popup>
  </div>
</template>

<script>
import Header from "@/components/header";
import pag from "@/components/pagination";

export default {
  components: { Header, pag },
  data() {
    return {
      // 分页
      page: 1,
      rows: 10,
      total: 0,
      amount: "",
      // 日期
      date: {
        start: "",
        end: ""
      },
      currentDate: new Date(),
      minDate: new Date(1920, 10, 1),
      maxDate: new Date(),
      showstart: false,
      showend: false,
      show: false,
      //  loading
      loading: true,
      //表格数据
      tableData: [], //全部数据
      vesssel: [], //页面临时数据
      form: {}
    };
  },
  methods: {
    pagenum(data) {
      this.page = data[0];
      this.rows = 10;
    },
    // 结束日期
    end(date) {
      this.showend = false;
      this.date.end = this.setdate(date, "{y}-{m}-{d}");
    },
    // 开始日期
    start(date) {
      this.showstart = false;
      this.date.start = this.setdate(date, "{y}-{m}-{d}");
    },
    // 查询
    select() {
      this.init({ start: this.date.start, end: this.date.end });
    },
    // 重置
    reset() {
      this.date.start = "";
      this.date.end = "";
    },
    // 申请提现
    apply() {
      if (this.amount == 0 || this.amount == "") return;
      // 未结算的总金额
      let sum = 0;
      this.tableData.map(v => {
        if (v.settlement_state == 0 || v.settlement_state == "未结算") {
          sum += v.day_receivable;
        }
      });
      if (this.amount > sum) {
        this.amount = sum.toFixed(2);
        this.Tips(`当前最大可提现金额：${sum.toFixed(2)}`, "warning");
      } else {
        this.$http(this.api.addWithdrawDeposits, {
          amount: this.amount,
          userName: this.$store.state.userinfo.loginname
        }).then(res => {
          if (res.data.result == "true") {
            this.Tips(
              res.data.message,
              res.data.result == "true" ? "success" : "warning"
            );
            this.init({ start: "", end: "" });
          }
        });
      }
    },
    // 查询日结算
    init(date) {
      this.$http(this.api.findDaySettlementByUser, {
        startTime: date.start,
        endTime: date.end,
        pageSize: 10,
        pageIndex: 0,
        state: ""
      }).then(res => {
        if (res.status == 200) {
          if (res.data.result == "true") {
            this.$refs.page.changecurrent(1);
            this.total = res.data.pageData.total;
            this.tableData = res.data.pageData.data;
            this.loading = false;
            this.vesssel = this.tableData.slice(0, this.rows);
          }
        }
      });
    },
    // 弹出层
    showdata(row) {
      this.show = !this.show;
      row.settlement_state == 1
        ? (row.settlement_state = "已结算")
        : (row.settlement_state = "未结算");
      this.form = row;
    }
  },
  watch: {
    page: function() {
      if (this.page == 1) {
        this.vesssel = this.tableData.slice(0, this.rows);
      } else if (this.page == Math.ceil(this.tableData.length / this.rows)) {
        this.vesssel = this.tableData.slice((this.page - 1) * this.rows);
      } else {
        this.vesssel = this.tableData.slice(
          (this.page - 1) * this.rows,
          this.rows * this.page
        );
      }
    }
  },
  created() {
    this.init({ start: "", end: "" });
  }
};
</script>

<style scoped>
.left {
  width: 70%;
}
.right {
  display: flex;
  flex-direction: column;
  align-content: space-between;
}
.chaxun {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-around;
}
</style>